<template>
	<view class="buySuccess">
		<js-navbar></js-navbar>
		<view class="container" v-if="is_jifen == 2">
			<view class="success">
				<image src="@/static/images/success.png" mode="aspectFit"></image>
				<view class="success-info">
					<view class="info-1">支付成功!</view>
					<view class="info-2">感谢您的购买</view>
				</view>
			</view>
			<view class="detail">
				<view class="box">
					<view class="top">
						<text v-if="info.pay_info.hasOwnProperty('jifen')" class="jifen_price">{{ summation('jifen') }} 鞋服豆</text>
						<text v-else>{{ info.price }}</text>
					</view>
					<view class="bottom">
						<view class="text">
							<text>订单编号：</text>
							<text>{{ info.order_id }}</text>
						</view>
						<view class="text">
							<text>下单时间：</text>
							<text>{{ info.dtTime }}</text>
						</view>
						<view class="text">
							<text>支付方式：</text>
							<text>鞋服豆支付</text>
						</view>
						<view class="text" v-if="!info.pay_info.hasOwnProperty('jifen')">
							<text>获取积分：</text>
							<text>购买商品获得{{ info.jifen || '0' }}积分</text>
						</view>
						<view class="text" v-if="info.xiefudou > 0">
							<text>获取鞋服币：</text>
							<text>购买商品获得{{ info.xiefudou || '0' }}鞋服币</text>
						</view>
						<view class="text">
							<text>鞋服币余额：</text>
							<text>{{ xf_info.total_jifen || '0' }}鞋服币</text>
						</view>
					</view>
				</view>
			</view>
			<view class="active-box">
				<button @click="fanhui">返回商城</button>
				<button @click="ddxq">订单详情</button>
			</view>
		</view>

		<view class="container" v-else>
			<view class="success">
				<image src="@/static/images/success.png" mode="aspectFit"></image>
				<view class="success-info">
					<view class="info-1">支付成功!</view>
					<view class="info-2">感谢您的购买</view>
				</view>
			</view>
			<view class="detail">
				<view class="box">
					<view class="top">
						<text v-if="info.pay_info.hasOwnProperty('jifen')" class="jifen_price">{{ summation('jifen') }} 积分</text>
						<text v-else>{{ info.price }}</text>
					</view>
					<view class="bottom">
						<view class="text">
							<text>订单编号：</text>
							<text>{{ info.order_id }}</text>
						</view>
						<view class="text">
							<text>下单时间：</text>
							<text>{{ info.dtTime }}</text>
						</view>
						<view class="text">
							<text>支付方式：</text>
							<text v-if="info.pay_info.yue">余额支付</text>
							<text v-else-if="info.pay_info.weixin">微信支付</text>
							<text v-else-if="info.pay_info.alipay">支付宝</text>
							<text v-else-if="info.pay_info.lipinka">抵扣金</text>
							<text v-else-if="info.pay_info.hasOwnProperty('jifen')">积分支付</text>
							<text v-else-if="is_jifen == 1">积分支付</text>
							<text v-else>微信支付</text>
						</view>
						<view class="text" v-if="!info.pay_info.hasOwnProperty('jifen')">
							<text>获取积分：</text>
							<text>购买商品获得{{ info.jifen || '0' }}积分</text>
						</view>
						<view class="text" v-if="info.xiefudou > 0">
							<text>获取鞋服币：</text>
							<text>购买商品获得{{ info.xiefudou || '0' }}鞋服币</text>
						</view>
						<view class="text">
							<text>鞋服币余额：</text>
							<text>{{ xf_info.total_jifen || '0' }}鞋服币</text>
						</view>
					</view>
				</view>
			</view>
			<view class="active-box">
				<button @click="fanhui">返回商城</button>
				<button @click="ddxq">订单详情</button>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/common/api';

export default {
	name: 'buySuccess',
	computed: {
		summation() {
			return (key, i = 0) => {
				if (this.info.products.length > 0) {
					return this.info.products
						.reduce((total, current) => {
							return total + parseFloat(current[key]) * parseFloat(current['num']);
						}, 0)
						.toFixed(i);
				} else {
					return 0;
				}
			};
		}
	},
	data() {
		return {
			// loading:false,
			id: '',
			info: {
				pay_info: {}
			},
			is_jifen: 0,
			xf_info:{}
		};
	},
	onLoad(data) {
		if (data.hasOwnProperty('is_jifen')) {
			this.is_jifen = data.is_jifen;
		}
		this.id = data.id || '888_2023092508430474864';
		this.init(data.id);
		this.$http.getJson('users_xieFuDouInfo', {}).then((res) => {
			const { code, data, message } = res;
			if (code == 1) {
				this.xf_info = res.data;
			}
		});
	},
	methods: {
		ddxq() {
			if (this.is_jifen == 1) {
				this.toRed(`jifenshangcheng/jforderDetails?id=${this.id}`);
			} else {
				this.toNav(`order/orderDetails?id=${this.id}`);
			}
		},
		fanhui() {
			if (this.is_jifen == 1) {
				this.toRed(`jifenshangcheng/jifenshangcheng`);
			} else {
				this.toTab(`home/home`);
			}
		},
		init(id) {
			this.$http.getJson('orders_detail', { id: this.id }).then((res) => {
				if (res.code == 1) {
					this.info = res.data;
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.buySuccess {
	&::before {
		position: absolute;
		top: 0;
		content: '';
		display: block;
		width: 750rpx;
		height: 484rpx;
		background: @basecolor;
	}
	.container {
		height: 484rpx;
		width: 750rpx;
		position: fixed;
		top: 0;
		.jifen_price {
			&:before {
				display: none;
			}
		}
		.success {
			.fix-c-x();
			bottom: 124rpx;
			.flex-center();
			image {
				width: 112rpx;
				height: 112rpx;
				margin-right: 34rpx;
			}
			.success-info {
				.info-1 {
					font-size: 36rpx;
					font-weight: bold;
					color: #ffffff;
				}
				.info-2 {
					font-size: 28rpx;
					color: #ffffff;
				}
			}
		}

		.detail {
			&::before {
				content: '';
				.fix-c-x();
				bottom: 44rpx;
				width: 718rpx;
				height: 24rpx;
				background: #a73535;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
			}

			.box {
				.fix-c-x();
				top: 428rpx;
				width: 686rpx;
				// height: 432rpx;
				padding: 0 24rpx 58rpx;
				background: #ffffff;
				&:before {
					.fix-c-x();
					content: '';
					width: 750rpx;
					height: 56rpx;
					background: linear-gradient(180deg, rgba(229, 78, 78, 0.2) 0%, rgba(207, 32, 37, 0) 100%);
				}
				.top {
					padding: 42rpx 0 32rpx;
					border-bottom: 2rpx solid #e4e4e4;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
					text-align: center;
					text::before {
						content: '￥';
						font-size: 24rpx;
					}
					text {
						font-size: 48rpx;
					}
				}
				.bottom {
					margin-top: 42rpx;
					.text {
						& + {
							margin-top: 36rpx;
						}
						font-size: 28rpx;
						color: #000000;
						text:nth-of-type(1) {
							margin-right: 0.5em;
						}
					}
				}
			}
		}

		.active-box {
			position: relative;
			top: 1088rpx;
			display: flex;
			justify-content: space-between;
			margin: 0 32rpx;
			button {
				width: 334rpx;
				height: 80rpx;
				border-radius: 64rpx 64rpx 64rpx 64rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				margin: 0;
			}
		}
	}
}
</style>
c
